/* Выстраиваем пункты списка в ряд, а не друг под другом: */
.social__item {
    display: inline-block;
}
/* Превращаем ссылки из строчных в блочные элементы. 
После этого можем задать высоту и ширину: */
.social__link {
    display: block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; 
  }
/* Задаём иконки фоном для каждой отдельной ссылки:   */
.twitter {
    background-image: url(twitter-round-blue.png);
    /* задаем размер картинки */
    background-size: 100%;
  }
  
.fb {
    background-image: url(fb-square-blue.png);
    background-size: 100%;
  }   
  
.youtube {
    background-image: url(youtube-red-square.png);
    background-size: 100%;
  }

/* По умолчанию ссылки — строчные. Это значит, что им нельзя задать размеры (width и height) и фоновую картинку.

Пишем display: block, и строка превращается в условный прямоугольник, у которого могут быть и размеры, и фон.
  
После этого смело меняем размер на нужный нам и фоном выводим иконки каждой из соцсетей.
  
Помимо этого по ходу решения задачи мы установили свойство display: inline-block для пунктов списка с классом social__item. 
За счёт этого элементы, которые по умолчанию блочные, приобретают внешние признаки строчных элементов. 
Вместо того чтобы выстраиваться друг под другом, пункты списка теперь стоят рядом, в строку. */
